<#macro WorkflowOperate>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>申请审批意见</legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">处理结果</label>
        <div class="layui-input-block">
            <#list nextPvmList as item>
                <input type="radio" name="operateType" lay-filter="operatorRadio"  value="handler_pass:${item.properties['name']}" 
                    title="${item.properties['name']}" next_key="${item.destination.id}">
                <div class="layui-unselect layui-form-radio layui-form-radioed">
                    <div>${item.properties["name"]}</div>
                </div>
            </#list>
            <#if histTaskList?? && (histTaskList?size>0) >
                <input type="radio" name="operateType" lay-filter="operatorRadio"  value="handler_refuse:驳回" title="驳回">
                <div class="layui-unselect layui-form-radio layui-form-radioed">
                    <div>驳回</div>
                </div>
            </#if>
            <#if skipTaskList?? && (skipTaskList?size>0) >
                <input type="radio" name="operateType" lay-filter="operatorRadio"  value="handler_skip:跳转" title="跳转" >
                <div class="layui-unselect layui-form-radio layui-form-radioed">
                    <div>跳转</div>
                </div>
            </#if>
        </div>
    </div>
    <div id="divPass" class="layui-hide">
        <div class="layui-form-item">
            <label class="layui-form-label">流向节点</label>
            <div class="layui-input-block">
                <input type="hidden" id="next_task_key" name="next_task_key" />
                <div id="divPassMsg" title="" style="padding-top:9px;"></div>
            </div>
        </div>
      <!--   <div class="layui-form-item">
            <label class="layui-form-label">候选分组</label>
            <div class="layui-input-block">
                <input type="hidden" id="next_task_group" name="next_task_group" />
                <div id="divPassGroup" title="" style="padding-top:9px;">--> 
                   <!-- <button id="btnTaskGroup" type="button" class="btn btn-minier btn-warning btn-group">
                        <i class="ace-icon fa fa-pencil align-top bigger-125"></i>变更
                    </button> --> 
               <!-- </div>
            </div>
        </div>
         <div class="layui-form-item">
            <label class="layui-form-label">候选用户</label>
            <div class="layui-input-block">
                <input type="hidden" id="next_task_user" name="next_task_user" />
                <div id="divPassUser" title="" style="padding-top:9px;">--> 
                     <!--<button id="btnTaskUser" type="button"  class="btn btn-minier btn-warning btn-user">
                        <i class="ace-icon fa fa-pencil align-top bigger-125"></i>变更
                    </button>--> 
               <!-- </div>
            </div>
        </div> --> 
    </div>
    <div id="divRefuse" class="layui-hide">
        <div class="layui-form-item">
            <label class="layui-form-label">驳回节点</label>
            <div class="layui-input-block">
                <select id="jump_task_key" name="jump_task_key" >
                    <option value="" >==请选择==</option>
                    <#list histTaskList as item>
                    <option value="${item.id}" >${item.properties["name"]}</option>
                    </#list>
                </select>
            </div>
        </div>
    </div>
    <div id="divSkip" class="layui-hide">
        <div class="layui-form-item">
            <label class="layui-form-label">跳转节点</label>
            <div class="layui-input-block">
                <select id="skip_task_key" name="skip_task_key" >
                    <option value="" >==请选择==</option>
                    <#list skipTaskList as item>
                    <option value="${item.id}" >${item.properties["name"]}</option>
                    </#list>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">处理意见</label>
        <div class="layui-input-block">
           <textarea id="suggestion" name="suggestion" placeholder="请输入处理意见" class="layui-textarea"></textarea>
        </div>
    </div>
    <script>
    
        var nextTaskDef = {
            <#list nextTaskDefList as taskMap>
                   <#list taskMap?keys as itemKey>
                "${itemKey}": "${taskMap['${itemKey}']}",
                   </#list>
            </#list>
            "-1":""
        };
        layui.use(['form','layer','element','jquery'], function(){
            var form = layui.form;
            var layer=layui.layer;
            var element = layui.element;
            $=layui.jquery;
            form.on('radio(operatorRadio)', function(data){
            	console.log(data.value)
                if(data.value.startsWith("handler_pass:")){
                     $("#divRefuse").addClass("layui-hide");
                     $("#divSkip").addClass("layui-hide");
                     $("#divPass").removeClass("layui-hide");
                     $("#next_task_key").val($(this).attr("next_key"));
                     $("#divPassMsg").html(nextTaskDef[$(this).attr("next_key")]);
                     $("#divPassGroup").html(nextTaskDef[$(this).attr("next_key")+"userGroupsName"]);
                     $("#divPassUser").html(nextTaskDef[$(this).attr("next_key")+"userNames"]);
                }else if(data.value.startsWith("handler_skip:")){
                    $("#divRefuse").addClass("layui-hide");
                    $("#divPass").addClass("layui-hide");
                    $("#divSkip").removeClass("layui-hide");
                } else {
                    $("#divPass").addClass("layui-hide");
                    $("#divSkip").addClass("layui-hide");
                    $("#divRefuse").removeClass("layui-hide");
                }
                $("#suggestion").val($(this).next().children("div").text());
            })
        })
    </script>
</#macro>

<@override name="head-styles">
    <style>
    .tab-content {
        border: 1px solid #c5d0dc;
        padding: 15px;
        position: relative;
    }
    .circle {
        -webkit-border-radius:15px;
        border-radius: 15px;
    }
    .rhomb{
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    </style>
    <link href="${contextPath}/assets/css/jquery.qtip.min.css" type="text/css" rel="stylesheet" />
    <@block name="workflow-styles"></@block>
</@override>

<@override name="page-content">
    <@block name="workflow-title"></@block>
    <div class="layui-tab layui-tab-horizontal layui-tab-brief">
        <ul class="layui-tab-title">
          <li class="layui-this">基本信息</li>
          <li>审批信息</li>
          <li>审批流程</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form">
                    <input type="hidden" name = "processInstanceId" value=${processInstanceId}>
                    <input type="hidden" name = "taskId" value=${taskId}>
                    <@block name="workflow-content"></@block>
                </form>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th class="align-center" width="50px" nowrap="nowrap">序号</th>
                            <th class="align-center" nowrap="nowrap">节点名称</th>
                            <th class="align-center" nowrap="nowrap">处理时间</th>
                            <th class="align-center" nowrap="nowrap">操作者</th>
                            <th class="align-center" nowrap="nowrap">处理结果</th>
                            <th class="align-center">处理意见</th>
                        </tr>
                    </thead>
                    <tbody>
                    <#if logList?has_content>
                    <#list logList as dataItem>
                        <tr>
                            <td class="align-center" width="50px" nowrap="nowrap">
                                ${(pageNo-1)*pageSize+dataItem_index+1}
                            </td>
                            <td class="align-center" nowrap="nowrap">
                                ${dataItem.taskName}
                            </td> 
                            <td class="align-center" nowrap="nowrap">
                                ${dataItem.operateTime}
                            </td> 
                            <td class="align-center" nowrap="nowrap">
                                ${dataItem.operatorName}
                            </td> 
                            <td class="align-center" nowrap="nowrap">
                                ${dataItem.operateName}
                            </td>
                            <td class="">
                                ${dataItem.operateContent}
                                <#if dataItem.affixList??>
                                    <#list dataItem.affixList as affixItem>
                                        <div>
                                        <a href='${contextPath}${affixItem.affixRemoteUrl}' target='_blank'>${affixItem.affixFilename}</a></div>
                                        </div>
                                    </#list>
                                </#if>
                            </td>
                        </tr>
                    </#list>
                    <#else>
                        <tr>
                            <td colspan="6" style="color:red;text-align:center;">暂无审批信息</td>
                        </tr>
                    </#if> 
                    </tbody>
                </table>
            </div>
            <div class="layui-tab-item">
                <div id="workflowTrace" style="height:600px; position:relative;"></div>
            </div>
        </div>
    </div>
</@override>
<@override name="page-scripts">
    <@block name="workflow-scripts"></@block>
    <script src="${contextPath}/assets/js/jquery.qtip.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('.layui-tab-horizontal .layui-tab-title').on('click', function(title) {
            if(title.target.innerText=="审批流程" && $("#workflowTrace").html() == ""){
                //获取图片资源
                var imageUrl = "${contextPath}/workflow/resource/process-instance?pid=${processInstanceId}&type=image";
                $.getJSON('${contextPath}/workflow/resource/process/trace?pid=${processInstanceId}', function(infos) {
                    var positionHtml = "";
                    var nodeCount=0;
                    
                    // 生成图片
                    var varsArray = new Array();
                    $.each(infos, function(i, v) {
                        var className = "";
                        var nodeName = "";
                        if(v.type == 'userTask'){
                            className = "activity-attr";
                            nodeName = v.vars.节点说明
                            varsArray[nodeCount] = v.vars;
                            nodeCount++;
                        }
                        var $positionDiv = $('<div/>', {
                            'class': className
                        }).css({
                            position: 'absolute',
                            left: (v.x + 10),
                            top: (v.y ),
                            width: (v.width ),
                            height: (v.height),
                            backgroundColor: 'black',
                            opacity: 0,
                            zIndex: $.fn.qtip.zindex - 1
                        });
    
                        // 节点边框
                        var $border = $('<div/>', {
                            'class': 'activity-attr-border'
                        }).css({
                            position: 'absolute',
                            textAlign: 'center',
                            left: (v.x + 10 ),
                            top: (v.y ),
                            width: (v.width ),
                            height: (v.height),
                            zIndex: $.fn.qtip.zindex - 2
                        }).text(nodeName);
                        
                        if (v.currentActiviti) {
                            $border.addClass('ui-corner-all-12').css({
                                border: '3px solid red'
                            });
                        } else if (v.historyActiviti) {
                            $border.addClass('ui-corner-all-12').css({
                                border: '3px solid green'
                            });
                        } 
                        if(v.type == 'startEvent' || v.type == 'endEvent'){
                            $border.addClass('circle').css({
                                left: (v.x + 11 ),
                                top: (v.y + 1 ),
                            });
                        } else if(v.type == 'exclusiveGateway' || v.type == 'inclusiveGateway'){
                            $border.addClass('rhomb').css({
                                left: (v.x + 14 ),
                                top: (v.y + 4 ),
                                width: (v.width - 7 ),
                                height: (v.height - 7),
                            });
                        }
                        //$border.innerText('1234')
                        positionHtml += $positionDiv.prop('outerHTML') + $border.prop('outerHTML');
                        console.log($border)
                        console.log(v)
                        
                        if (v.historyActiviti){
                            for(var m=0; m<v.linePos.length; m++){
                                for(var n=0; n<v.linePos[m].length-2; n+=2){
                                    // 连接线
                                    var x1,y1,x2,y2;
                                    x1 = v.linePos[m][n];
                                    y1 = v.linePos[m][n+1];
                                    x2 = v.linePos[m][n+2];
                                    y2 = v.linePos[m][n+3];
                                    if(x2 < x1){
                                        var tmp = x1;
                                        x1=x2;
                                        x2=tmp;
                                    }
                                    if(y2 < y1){
                                        var tmp = y1;
                                        y1=y2;
                                        y2=tmp;
                                    }
                                    x1 = x1 + 8;
                                    var $line = $('<div/>', {
                                        'class': 'activity-attr-line'
                                    }).css({
                                        position: 'absolute',
                                        left: (x1),
                                        top: (y1-1),
                                        width: (x2-x1 + 8),
                                        height: (y2-y1),
                                        zIndex: $.fn.qtip.zindex - 2
                                    });
                                    
                                    $line.addClass('ui-corner-all-12').css({
                                        border: '2px solid green'
                                    });
                                    positionHtml += $line.prop('outerHTML');
                                }
                            }
                        }
                    });
    
                    if(varsArray.length > 0){
                        $("#workflowTrace").html(
                            "<div><img id='workflowTraceImg' src='" + imageUrl + "' style='position:absolute; left:10px; top:0px;' />" +
                                "<div id='processImageBorder'>" +
                                positionHtml +
                                "</div>" +
                            "</div>"
                        );
                        $("#workflowTraceImg").load( function(){
                            $("#workflowTrace").height($("#workflowTraceImg").height());
                        });
                        
                    } else {
                        $("#workflowTrace").html("<div>没有找到流程图！</div>")
                    }
                    
                    // 设置每个节点的data
                    $('.activity-attr').each(function(i, v) {
                        $(this).data('vars', varsArray[i]);
                    });
                    $('.activity-attr').qtip({
                        content: function() {
                            var vars = $(this).data('vars');
                            var tipContent = "<table class='need-border' style='line-height:28px'>";
                            if(vars.任务名称){
                                tipContent += "<tr><td nowrap='nowrap'>节点名称：</td><td>" + vars.任务名称 + "<td/></tr>";
                            }
                            /* if(vars.办理人员){
                               tipContent += "<tr><td nowrap='nowrap'>办理人员：</td><td>" + vars.办理人员 + "<td/></tr>";
                            } else if(vars.当前办理){
                               tipContent += "<tr><td nowrap='nowrap'>当前办理：</td><td>" + vars.当前办理 + "<td/></tr>";
                            } */
                            
                            tipContent += "</table>";
                            return tipContent;
                        },
                        position: {
                            my: 'left bottom',
                            at: 'top right',
                            adjust: {
                                x: 4
                            }
                        }
                    });
                });
            }
        })
    </script>
</@override>
<@extends name="/layout/basepage.html"/> 